
<template>
  <!-- <div>加上setup 可以直接在script 中打印数据</div> -->
  <div>我今年的年纪: <input type="text" v-model="age"></div>
  <div>我明年的年纪: {{nextAge}}</div>
  <div>我后年的年纪: <input type="text" v-model="nextAge2"></div>
</template>

<script setup>
  import { ref, computed } from 'vue'
  const age = ref(23)
  
  // 不带set的计算属性
  const nextAge = computed(() =>{
    return +age.value + 1
  })

  // 带set的计算属性
  const nextAge2 = computed({
    get(){
      return +age.value + 2
    },
    set(value){
      // input 中的数据改变的时候set才会生效
      age.value = value - 2
      console.log(value,'当前的数据')
    }
  })
</script>

